<template>
  <div class="upload_magic" v-if="configData">
    <div class="title">
      <div class="word">
        {{ configData.title }}
      </div>
      <div class="bgtype">
        <Select
          @on-change="queueChange"
          placeholder="选择行列式"
          v-model="configData.queue"
          style="width: 150px"
        >
          <Option value="1*1">1行 × 1列</Option>
          <Option value="1*2">1行 × 2列</Option>
          <Option value="1*3">1行 × 3列</Option>
          <Option value="1*4">1行 × 4列</Option>
          <Option value="1*5">1行 × 5列</Option>
          <Option value="1*6">1行 × 6列</Option>
          <Option value="1*8">1行 × 8列</Option>
          <Option value="2*1">2行 × 1列</Option>
          <Option value="2*2">2行 × 2列</Option>
          <Option value="2*3">2行 × 3列</Option>
          <Option value="2*4">2行 × 4列</Option>
          <Option value="2*5">2行 × 5列</Option>
          <Option value="2*6">2行 × 8列</Option>
          <Option value="2*8">2行 × 8列</Option>
          <Option value="3*1">3行 × 1列</Option>
          <Option value="3*2">3行 × 2列</Option>
          <Option value="3*3">3行 × 3列</Option>
          <Option value="3*4">3行 × 4列</Option>
          <Option value="4*1">4行 × 1列</Option>
          <Option value="4*2">4行 × 2列</Option>
          <Option value="4*3">4行 × 3列</Option>
          <Option value="4*4">4行 × 4列</Option>
        </Select>
      </div>
      <!-- <Button @click="modalPicTap('单选')" size="small" icon="md-images" type="primary">上传图片</Button> -->
    </div>
    <div class="box">
      <img :src="configData.img" v-if="configData.img" />
      <div class="empty" v-else></div>
      <div class="fullbox">
        <div
          class="rows"
          v-for="(rItem, ridx) in configData.urlList"
          :key="ridx"
        >
          <div class="cols" v-for="(cItem, cidx) in rItem" :key="cidx">
            <Input
              v-model="configData.urlList[ridx][cidx]"
              :data-row="ridx"
              :data-col="cidx"
              readonly
              @click.native="getLink(ridx, cidx, rItem)"
              class="link"
              placeholder="请输入此区域链接"
            />
          </div>
        </div>
      </div>
    </div>
    <div>
      <Modal
        v-model="modalPic"
        width="60%"
        scrollable
        footer-hide
        closable
        title="上传背景图"
        :mask-closable="false"
        :z-index="1"
      >
        <uploadPictures
          :isChoice="isChoice"
          @getPic="getPic"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          v-if="modalPic"
        ></uploadPictures>
      </Modal>
    </div>
    <linkaddress ref="linkaddres" @linkUrl="linkUrl"></linkaddress>
  </div>
</template>

<script>
import _ from 'underscore';
import { mapState } from 'vuex'
import uploadPictures from '@/components/uploadPictures';
import linkaddress from '@/components/linkaddress';
export default {
  name: 'c_flex_box',
  components: {
    linkaddress,
    uploadPictures
  },
  computed: {
    ...mapState({
      tabVal: state => state.admin.mobildConfig.searchConfig.data.tabVal
    })
  },
  props: {
    configObj: {
      type: Object
    },
    configNme: {
      type: String
    }
  },
  data () {
    return {
      defaults: {},
      configData: {},
      modalPic: false,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      activeIndex: 0,
      indexLast: 0,
      ridx: 0,
      cidx: 0

    }
  },
  watch: {
    configObj: {
      handler (nVal, oVal) {
        console.log(nVal[this.configNme], '888')
        this.defaults = nVal
        this.configData = nVal[this.configNme]
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    this.defaults = this.configObj
    this.configData = this.configObj[this.configNme]
  },
  methods: {
    linkUrl (e) {
      this.configData.urlList = this.configData.urlList.map((em,i) => {
          if(this.ridx == i){
              em[this.cidx] = e
          }
          return em
      });
    },
    getLink (index, key, item) {
        this.ridx = index
        this.cidx = key
        this.$refs.linkaddres.modals = true
    },
    linkChange (a, b, c) {
      console.info(a, b, c)
    },
    queueChange (queue) {
      let flex = queue.split('*');
      this.configData.urlList = _.map(_.range(parseInt(flex[0])), row => {
        return new Array(parseInt(flex[1]))
      });
      //this.configData.queue = queue;
    },
    // 点击图文封面
    modalPicTap (title) {
      this.modalPic = true;
    },
    // 添加自定义弹窗
    addCustomDialog (editorId) {
      window.UE.registerUI('test-dialog', function (editor, uiName) {
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: '/admin/widget.images/index.html?fodder=dialog',
          editor: editor,
          name: uiName,
          title: '上传图片',
          cssRules: 'width:1200px;height:500px;padding:20px;'
        });
        this.dialog = dialog;
        // 参考上面的自定义按钮
        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '上传图片',
          cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
          onclick: function () {
            // 渲染dialog
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      }, 37);
    },
    // 获取图片信息
    getPic (pc) {
      this.$nextTick(() => {
        this.configData.img = pc.att_dir;
        this.modalPic = false;
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.upload_magic {
  .title {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .word {
      font-size: 14px;
      width: 120px;
    }
  }

  .bgtype {
    width: 60%;
    display: flex;
    margin-right: 20px;
    justify-content: flex-end;
  }

  .box {
    position: relative;
    width: 100%;
    margin-bottom: 10px;

    .empty {
      width: 100%;
      height: 100px;
      background-color: #cccccc8a;
    }

    img {
      width: 100%;
      display: block;
    }

    .fullbox {
      display: flex;
      flex-direction: column;

      .rows {
        flex: 1;
        display: flex;
        flex-direction: row;

        .cols {
          flex: 1;
          border: 1px dashed #f00;
        }
      }
    }
  }
}

.link {
  width: 96%;
  height: 100%;
  align-items: center;
  display: flex;
  margin: 0 auto 0;
}

.link >>> .ivu-input {
  background-color: #00000075;
  color: #fff;
}
</style>
